<template>
  <!-- 登录窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="380px"
    top="230px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header="{ titleId }">
      <div class="my-header">
        <h4 :id="titleId" class="text-2xl text-center font-bold login-title">
          验证
        </h4>
        <el-icon class="my-close-btn" @click="() => (dialogVisible = false)">
          <Close />
        </el-icon>
      </div>
    </template>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="40px"
      :center="true"
      @submit.prevent
    >
      <el-form-item label="" prop="UserID">
        <el-select
          ref="UserIDRef"
          v-model="formData.UserID"
          placeholder="请选择用户"
          style="width: 260px"
        >
          <el-option label="Admin" value="Admin"></el-option>
          <el-option label="Normal" value="Normal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="UserPW">
        <el-input
          ref="pwRef"
          v-model="formData.UserPW"
          type="password"
          tabindex="2"
          clearable
          placeholder="请输入密码"
          style="width: 260px"
          show-password
          @focus="focusPwRef"
          @keyup.enter.prevent="login"
          ><template #prepend> <el-button :icon="Key" /> </template
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="login" style="width: 260px">
          确 定
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, unref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { User, Key } from "@element-plus/icons-vue";
import { URCheck } from "../../api";

const currentType = ref();
const dialogVisible = ref(false);
const pwRef = ref();
const open = (type: string) => {
  formData.UserPW = "";
  dialogVisible.value = true;
  currentType.value = type;
  // const userID = localStorage.getItem("FEEDER_USER_ID");
  // formData.UserID = userID || "";
  nextTick(() => {
    if (!formData.UserID) {
      focusUserIDRef();
      return;
    }
    focusPwRef();
  });
};
defineExpose({ open });

const focusPwRef = () => {
  pwRef.value.focus();
};

const UserIDRef = ref();
const focusUserIDRef = () => {
  UserIDRef.value.focus();
};

const formData = reactive({
  UserID: "",
  UserPW: "",
});

const emit = defineEmits(["success"]);
const login = () => {
  URCheck({
    InputStr: `OperType=${currentType.value}`,
    JsonStr: [{ ...formData }],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success(res.msg);
    dialogVisible.value = false;
    emit("success", currentType.value);
    // localStorage.setItem("FEEDER_USER_ID", formData.UserID);
  });
};
</script>
<style scoped lang="less">
.flex {
  display: flex;
  flex-wrap: wrap;
  width: 700px;
  justify-content: space-between;
  align-content: center;
  position: absolute;
  left: 50%;
  margin-left: -350px;

  .my-button {
    width: 200px;
    height: 120px;
    margin: 0;
  }
}

.flex-1 {
  top: 90px;
}

.flex-2 {
  width: 500px;
  top: 260px;
  margin-left: -250px;
  justify-content: space-around;
}

:deep(.flex .el-button > span) {
  font-size: 20px;
}
.login-title {
  color: #409eff;
}
.my-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #666;
}
:deep(.my-form-item) {
  margin: 0;
  margin-top: -16px;
}
:deep(.my-form-item .el-form-item__content) {
  margin-left: 228px;
}
.my-update-btn {
  margin-left: 188px;
}
</style>
